<template>
  <div class=''>
    <el-dialog
        :visible.sync='detailDialog'
        width="80%"
        :before-close="handleClose"
        class="detail"
    >
        <el-tabs tab-position="left" @tab-click="handleClick" v-model="tabPosition">
            <el-tab-pane label="商城订单" name='1'>
                <el-table :data="ShopList" border >
                  <el-table-column label="订单编号" width="200px" align="center" prop="orderSn"></el-table-column>
                  <el-table-column label="商品名称" align="center" prop="receiverName"></el-table-column>
                  <el-table-column label="数量" align="center" prop=""></el-table-column>
                  <el-table-column label="支付金额" align="center" prop="totalAmount"></el-table-column>
                  <el-table-column label="支付时间" align="center" prop="createTime"></el-table-column>
                  <el-table-column label="订单状态" align="center">
					  <template slot-scope="scope">
						  {{scope.row.status}}
					  </template>
				  </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="地址列表" name='2'>
                <el-table :data="addressList" border >
                  <el-table-column label="序号" align="center" prop="id"></el-table-column>
                  <el-table-column label="收货人" align="center" prop="name"></el-table-column>
                  <el-table-column label="手机号码" align="center" prop="phoneNumber"></el-table-column>
                  <el-table-column label="地址" align="center" prop="detailAddress">
					  <template slot-scope="scope">
					  		{{scope.row.province}}{{scope.row.region}}{{scope.row.detailAddress}}
					  </template>
				  </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="收益列表" name='3'>
                <el-table :data="EstimateList" border >
                  <el-table-column label="订单编号" width="200px" align="center" prop="orderNo"></el-table-column>
                  <el-table-column label="商品名称" align="center" prop=""></el-table-column>
                  <el-table-column label="支付金额" align="center" prop="orderAmount"></el-table-column>
                  <el-table-column label="来源用户" align="center" prop="assignTypeName"></el-table-column>
                  <el-table-column label="支付时间" align="center" prop="orderPaymentTime"></el-table-column>
                  <el-table-column label="收益" align="center" prop="amount"></el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="资金流水" name='4'>
                <el-table :data="MoneyList" border >
                  <el-table-column label="时间" align="center" prop="createTime"></el-table-column>
                  <el-table-column label="类型" align="center" prop="reason"></el-table-column>
                  <el-table-column label="金额" align="center" prop="afterChangeBalance"></el-table-column>
                  <el-table-column label="变动余额" align="center" prop="changeAmount"></el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
		<el-pagination
		  background
		  @size-change="handleSizeChange"
		  @current-change="handleCurrentChange"
		  layout="total, sizes,prev, pager, next,jumper"
		  :current-page.sync="listQuery.pageIndex"
		  :page-size="listQuery.pageSize"
		  :page-sizes="[20,100]"
		  :total="total">
		</el-pagination>
        <el-row class="detail-header" v-if="shouyi">
            <el-col :span="8">
                本月收益：{{predictOfThisMonth}}
            </el-col>
            <el-col :span="8">
                累计收益：{{predictOfTotal}}
            </el-col>
            <el-col :span="8">
                账户余额：{{balance}}
            </el-col>
        </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getShopList , getAddressList , getEstimateList , getMoneyList , getAccount } from '@/api/user'
export default {
  name: 'child',
  props:{
    detailDialog:Boolean
  },
  data () {
    return {
        list:[],
		ShopList:[],
        addressList:[],
		EstimateList:[],
		MoneyList:[],
		total:0,
        shouyi:false,
        listQuery:{
          memberId:'',
          pageIndex:1,
          pageSize:20
        },
		memberId:'',
		userId:'',
		tabPosition:'1',
		balance:0,
		predictOfThisMonth:0,
		predictOfTotal:0
    }
  },
  methods: {
	// 分頁
	handleSizeChange(val) {
	  this.listQuery.pageIndex = 1;
	  this.listQuery.pageSize = val;
	  if(this.tabPosition == '1'){
	  		  this.openShopList();
	  }else if(this.tabPosition == '2'){
	  		  this.openAddressList();
	  }else if(this.tabPosition == '3'){
	  		  this.openEstimate();
	  }else if(this.tabPosition == '4'){
	  		  this.openMoneyList();
	  }
	},
	handleCurrentChange(val) {
	  console.log(val)
	  this.listQuery.pageIndex = val;
	  if(this.tabPosition == '1'){
		  this.openShopList();
	  }else if(this.tabPosition == '2'){
		  this.openAddressList();
	  }else if(this.tabPosition == '3'){
		  this.openEstimate();
	  }else if(this.tabPosition == '4'){
		  this.openMoneyList();
	  }
	},
    // 获取地址列表
    pushId(id){
	  this.memberId = id
	  this.userId = id
	  this.openShopList();
    },
	// 商城訂單
	openShopList(){
		this.listQuery.memberId = this.memberId
		getShopList(Object.assign(this.listQuery,{userId:this.userId})).then(res=>{
		  console.log('商城订单',res)
		  this.ShopList = res.list
		  this.total = res.total
		})
	},
	// 地址列表
	openAddressList(){
		this.listQuery.memberId = this.memberId
		getAddressList(Object.assign(this.listQuery)).then(res=>{
		  console.log('地址列表',res)
		  this.addressList = res.list
		  this.total = res.total
		})
	},
	// 收益列表
	openEstimate(){
		this.listQuery.memberId = this.memberId
		getEstimateList(Object.assign(this.listQuery)).then(res=>{
		  console.log('收益列表',res)
		  this.EstimateList = res.list
		  this.total = res.total
		})
		getAccount(this.userId).then(res=>{
			console.log(res)
			this.balance = res.data.balance
			this.predictOfThisMonth = res.data.predictOfThisMonth
			this.predictOfTotal = res.data.predictOfTotal
		})
	},
	// 資金流水
	openMoneyList(){
		this.listQuery.memberId = this.memberId
		getMoneyList(Object.assign(this.listQuery,{userId:this.userId})).then(res=>{
		  console.log('资金流水',res)
		  this.MoneyList = res.list
		  this.total = res.total
		})
	},
    // 关闭
    handleClose(){
        this.$parent.closeDialog();
		this.tabPosition = '1'
		this.shouyi = false
    },
    // 选择标签
    handleClick(e){
        if(e.label == '收益列表'){
			this.openEstimate();
            this.shouyi = true
        }else if(e.label == '资金流水'){
			this.openMoneyList();
            this.shouyi = false
        }else if(e.label == '地址列表'){
			this.openAddressList();
            this.shouyi = false
        }else if(e.label == '商城订单'){
			this.openShopList();
            this.shouyi = false
        }
    }
  }
}
</script>

<style lang='scss' scoped>
.detail{
    &-header{
        text-align: center;
        width: 90%;
        position: absolute;
        top: 15px;
    }
}
</style>
